<template>
  <div class="bg">
    <div class="Static">
      <div class="left">
        <div class="banner">
          <img
            data-v-68619bf0=""
            src="@/assets/banner-left.png"
            alt=""
            class="img-left"
          />
          <img
            data-v-68619bf0=""
            src="@/assets/banner-right.png"
            alt=""
            class="img-right"
          />
          <img
            data-v-68619bf0=""
            src="@/assets/avatar.png"
            alt=""
            class="user-header"
          />
          <p data-v-68619bf0="" class="user-title">仓储管理员</p>
          <p data-v-68619bf0="" class="subject-title">
            我不是为了输赢，我就是认真！
          </p>
          <p data-v-68619bf0="" class="subject-author">—— 罗永浩</p>
          <div class="site">
            <p class="title">北京总仓</p>
          </div>
        </div>
        <!-- 代办信息 -->
        <div class="backlog">
          <div data-v-38ba994c="" class="subject">待办信息</div>
          <div class="item-list">
            <el-row :gutter="20">
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <div class="backlog-item">
                    <div class="icon">
                      <i class="iconfont el-icon-s-fold"></i>
                    </div>
                    <div class="title">{{ todolist[0].name }}</div>
                    <div class="bottom">
                      <span class="spanlabel">新增</span>
                      <span class="spanValue">{{ todolist[0].value1 }}</span>
                      <span class="spanlabel">待审核</span>
                      <span class="spanValue" style="color: rgb(0, 118, 255)">{{
                        todolist[0].value2
                      }}</span>
                    </div>
                  </div>
                </div></el-col
              >
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <div class="backlog-item">
                    <div class="icon" style="background: rgb(255, 178, 0)">
                      <i class="iconfont el-icon-s-unfold"></i>
                    </div>
                    <div class="title">{{ todolist[1].name }}</div>
                    <div class="bottom">
                      <span class="spanlabel">新增</span>
                      <span class="spanValue">{{ todolist[1].value1 }}</span>
                      <span class="spanlabel">待审核</span>
                      <span class="spanValue" style="color: rgb(255, 178, 0)">{{
                        todolist[1].value2
                      }}</span>
                    </div>
                  </div>
                </div></el-col
              >
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <div class="backlog-item">
                    <div class="icon" style="background: rgb(255, 113, 0)">
                      <i class="iconfont el-icon-document"></i>
                    </div>
                    <!-- <div class="title">{{todolist[2].name}}</div> -->
                    <div class="bottom">
                      <span class="spanlabel">新增</span>
                      <span class="spanValue">{{ todolist[2].value1 }}</span>
                      <span class="spanlabel">待审核</span>
                      <span class="spanValue" style="color: rgb(255, 113, 0)">{{
                        todolist[2].value2
                      }}</span>
                    </div>
                  </div>
                </div></el-col
              >
            </el-row>
          </div>
        </div>
      </div>
      <!-- 通知公告 -->
      <div class="right">
        <div class="notes">
          <div class="subject">通知/公告</div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">紧急盘点通知</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">运维服务更新通知</div>
            <div class="time">2021.01.25 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">客户入库变更通知</div>
            <div class="time">2021.01.26 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">五一放假通知</div>
            <div class="time">2021.02.15 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr"></div>
            <div class="title">品达物流系统对接通知</div>
            <div class="time">2021.3.25 18:23:14</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 任务导航 -->
    <div class="tasks">
      <div class="subject">任务导航</div>
      <div class="item-list">
        <div class="item">
          <div class="icon"><i class="el-icon-truck"></i></div>
          <div class="title">收货任务</div>
        </div>
        <div class="item">
          <div class="icon" style="background: rgb(82, 212, 243)">
            <i class="el-icon-sell"></i>
          </div>
          <div class="title">上架任务</div>
        </div>
        <div class="item">
          <div class="icon" style="background: rgb(255, 113, 0)">
            <i class="el-icon-s-order"></i>
          </div>
          <div class="title">盘点任务</div>
        </div>
        <div class="item">
          <div class="icon" style="background: rgb(255, 96, 158)">
            <i class="el-icon-shopping-cart-full"></i>
          </div>
          <div class="title">拣货任务</div>
        </div>
        <div class="item">
          <div class="icon" style="background: rgb(255, 178, 0)">
            <i class="el-icon-s-custom"></i>
          </div>
          <div class="title">交接任务</div>
        </div>
      </div>
    </div>
    <!-- 入库出库图表 -->
    <div class="inout-charts">
      <div class="header">
        <div class="left">入库/出库信息</div>
        <div class="right">
           <el-radio-group fill="#ffb200" v-model="radio1">
            <el-radio-button label="本周" ></el-radio-button>
            <el-radio-button label="本月"></el-radio-button>
            <el-radio-button label="全年"></el-radio-button>
           </el-radio-group>
        </div>
      </div>
      <div id="inoutcharts"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { todo } from "@/yuanfeng/desk";
export default {
  async created() {
    // let date = new Date()
    // console.log(date);
    const { data } = await todo();
    // console.log(data.data);
    this.todolist = [...data.data];
    // console.log(this.todolist);
  },
 mounted() {
  setTimeout(()=>{
     let myChart = echarts.init(document.getElementById('inoutcharts'));
    let option;
    option = {
      legend: {
     data: ['入库', '出库'],
     bottom: 10,
    },
    color: ['#ff7100', '#f4b63f'],
    tooltip: {
     trigger: 'axis',
     axisPointer: {
      type: 'shadow',
     },
    },
    xAxis: {
     type: 'category',
     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
     type: 'value',
     splitLine: {
      show: true,
      lineStyle: {
       type: 'dashed',
      },
     },
    },
    series: [
     {
      name: '入库',
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
     },
     {
      name: '出库',
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
     },
    ],
    grid: {
     top: '50px',
     left: '50px',
     right: '15px',
     left: '50px',
    },
    };
    myChart.setOption(option)
  },0)
  },
  data() {
    return {
      todolist: [{}],
      radio1:''
    };
  },
};
</script>

<style lang="less" scoped>
.bg {
  width: 1230px;
  height: 1610px;
  .Static {
    width: 100%;
    height: 451px;
    display: flex;
    justify-content: space-between;
    .left {
      width: 966px;
      height: 450px;
      position: relative;
      background-color: #fdfafa;
      padding-right: 30px;
      .banner {
        position: relative;
        width: 100%;
        height: 148px;
        background: linear-gradient(270deg, #ffc771, #ffa634);
        box-shadow: 0 0 6px 0 rgba(188, 151, 69, 0.12);
        border-radius: 12px;
        .img-left {
          position: absolute;
          top: 0;
          left: 0;
          height: 148px;
        }
        .img-right {
          position: absolute;
          top: 0;
          right: 0;
          height: 148px;
        }
        .user-header {
          position: absolute;
          top: 31px;
          left: 43px;
          height: 62px;
        }
        .user-title {
          position: absolute;
          left: 36px;
          bottom: 5px;
          font-size: 16px;
          font-weight: 500;
          color: #332929;
          line-height: 22px;
        }
        .subject-title {
          position: absolute;
          font-weight: 500;
          color: #fff;
          line-height: 25px;
          top: 22px;
          left: 200px;
          font-size: 18px;
        }
        .subject-author {
          position: absolute;
          font-weight: 500;
          color: #fff;
          line-height: 25px;
          top: 62px;
          left: 400px;
          font-size: 16px;
        }
        .site {
          position: absolute;
          top: 20px;
          right: 20px;
          width: 147px;
          height: 40px;
          background: #f8f5f5;
          border-radius: 6px;
          opacity: 0.79;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-around;
          .title {
            font-size: 14px;
            font-weight: 500;
            color: #332929;
          }
        }
      }
      .backlog {
        margin-top: 20px;
        width: 100%;
        height: 282px;
        background: #fff;
        box-shadow: 0 0 6px 0 rgba(144, 142, 142, 0.17);
        border-radius: 12px;
        padding: 25px;
        box-sizing: border-box;

        .subject {
          font-size: 16px;
          font-weight: 600;
          color: #332929;
          line-height: 22px;
        }
        .item-list {
          width: 916px;
          height: 186px;
          margin-top: 19px;
          .backlog-item {
            position: relative;
            height: 186px;
            background: #fbf7f7;
            border-radius: 8px;
            padding: 20px;
            box-sizing: border-box;
            &:hover {
              background: #fff;
              box-shadow: 0 0 6px 0 rgba(144, 142, 142, 0.17);
            }
            .icon {
              width: 49px;
              height: 49px;
              background: #0076ff;
              border-radius: 12px;
              display: flex;
              align-items: center;
              justify-content: space-around;
              .iconfont {
                font-size: 32px;
                color: #f8f5f5;
              }
            }
            .title {
              position: absolute;
              top: 34px;
              left: 85px;
              font-size: 16px;
              font-weight: 500;
              color: #332929;
              line-height: 22px;
            }
            .bottom {
              position: absolute;
              bottom: 20px;
              .spanlabel {
                font-size: 14px;
                font-weight: 400;
                color: #887e7e;
                margin-right: 10px;
                vertical-align: super;
              }
              .spanValue {
                font-size: 36px;
                font-weight: 500;
                color: #332929;
                margin-right: 20px;
              }
              .spanlabel {
                font-size: 14px;
                font-weight: 400;
                color: #887e7e;
                margin-right: 10px;
                vertical-align: super;
              }
              .spanValue {
                font-size: 36px;
                font-weight: 500;
                color: #332929;
                margin-right: 20px;
              }
            }
          }
        }
      }
    }
    .right {
      width: 261px;
      height: 451px;
      background: #fff;
      box-shadow: 0 0 6px 0 rgba(144, 142, 142, 0.17);
      border-radius: 12px;
      padding: 30px;
      box-sizing: border-box;
      .notes {
        width: 175px;
        height: 451px;
        box-sizing: border-box;
        .subject {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #332929;
          line-height: 22px;
        }
        .item {
          margin-top: 15px;
          .hr {
            width: 201px;
            height: 1px;
            background-color: #f5efee;
          }
          .title {
            width: 195px;
            height: 18px;
            font-size: 13px;
            font-weight: 400;
            color: #332929;
            line-height: 18px;
            margin-top: 15px;
          }
          .time {
            width: 115px;
            height: 17px;
            font-size: 12px;
            font-weight: 400;
            color: #887e7e;
            line-height: 17px;
            margin-top: 10px;
          }
        }
      }
    }
  }
  .tasks {
    margin-top: 20px;
    width: 100%;
    height: 188px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgba(144, 142, 142, 0.17);
    border-radius: 12px;
    padding: 25px;
    box-sizing: border-box;
    .subject {
      width: 1177.6px;
      height: 21.6px;
      font-size: 16px;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    .item-list {
      width: 1177.6;
      height: 93px;
      margin-top: 19px;
      display: flex;
      .item {
        position: relative;
        width: 241px;
        height: 93px;
        margin-left: 15px;
        background: #fbf7f7;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        &:hover {
          background: #fff;
          box-shadow: 0 0 6px 0 rgba(144, 142, 142, 0.17);
        }
        .icon {
          width: 50px;
          height: 50px;
          background: #0076ff;
          border-radius: 25px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          i {
            font-size: 28px;
            color: #f8f5f5;
          }
        }
        .title {
          font-size: 16px;
          font-weight: 500;
          color: #332929;
          line-height: 22px;
        }
      }
    }
  }
  .inout-charts {
    margin-top: 20px;
    width: 1227px;
    height: 500px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgba(144, 142, 142, 0.17);
    border-radius: 12px;
    padding: 25px;
    box-sizing: border-box;
    .header{
      width: 1177.6px;
      height: 35px;
      .left{
        width: 25%;
        float: left;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 600;
        color: #332929;
        line-height: 22px;
      }
      .right{
        width: 75%;
        height: 100%;
        text-align: right;
        float: left;
        box-sizing: border-box;
        // background-color: red;
      }
    }
    #inoutcharts{
      width: 1178px;
      height: 430px;
    }
  }
}
</style>
